<!doctype html>
<html class="no-js" lang="zxx">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>2020 | Minimal Startup & Agency HTML Landing Page</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Place favicon.ico in the root directory -->
        

        <!-- All css here -->
        <link rel="stylesheet" href="../static/css/bootstrap.min.css">
        <link rel="stylesheet" href="../static/css/fontawesome-all.min.css">
        <link rel="stylesheet" href="../static/css/animate.css">
        <link rel="stylesheet" href="../static/css/slick.css">
        <link rel="stylesheet" href="../static/css/meanmenu.css">
        <link rel="stylesheet" href="../static/css/default.css">
        <link rel="stylesheet" href="../static/css/style.css">
        <link rel="stylesheet" href="../static/css/responsive.css">
    </head>
    <body>
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->
        <!--  ====== preloader=============================================  -->
        <div id="preloader">
            <div id="loading">
                <div id="loading-center">
                    <div id="loading-center-absolute">
                    <div class="object" id="object_one"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_three"></div>
                    <div class="object" id="object_four"></div>
                    <div class="object" id="object_five"></div>
                    <div class="object" id="object_six"></div>
                    <div class="object" id="object_seven"></div>
                    <div class="object" id="object_eight"></div>
                    
                    </div>
                </div>
            </div>
        </div><!-- /preloader -->

        <!--  ====== header-area-start=======================================  -->
        <header>
            <div id="header-sticky" class="transparent-header header-area">
                <div class="header header5">
                    <div class="container">
                        <div class="row align-items-center justify-content-between">
                            <div class="col-xl-3 col-lg-2 col-md-3 col-sm-3 col-4">
                                <div class="logo d-inline-block">
                                    <a href="index.html"><img class="transition-3" src="../static/picture/logo-white.png" alt="2020"></a>
                                </div>
                            </div><!-- /col -->
                            <div class="col-xl-8 col-lg-9 col-md-8 col-sm-8 col-8 d-flex justify-content-end">
                               <div class="main-menu">
                                   <nav id="mobile-menu">
                                        <ul class="d-block">
                                            <li>
                                                <a class="active text-white" href="#home">Home</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="#about">About</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="#product">products</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="#team">team</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="#blog">Blog</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="#contact">Contact</a>
                                            </li>
                                        </ul>
                                   </nav>
                               </div><!-- /main-menu -->
                               <div class="header-right d-flex align-items-center justify-content-end">
                                    <ul class="social text-center ml-30 d-none d-sm-block">
                                        <li class="d-inline-block">
                                            <a class="text-white pl-2 text-center d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                        </li>
                                        <li class="d-inline-block">
                                            <a class="text-white pl-2 text-center d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                        </li>
                                        <li class="d-inline-block">
                                            <a class="text-white pl-2 text-center d-inline-block transition-3" href="#"><i class="fab fa-google-plus-g"></i></a>
                                        </li>
                                        <li class="d-inline-block">
                                            <a class="text-white pl-2 text-center d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                        </li>
                                    </ul><!-- social -->
                                    <div class="d-block d-lg-none ml-30">
                                        <a class="mobile-menubar text-white" href="javascript:void(0);"><i class="far fa-bars"></i></a>
                                    </div>
                                </div>
                            </div><!-- /col -->
                        </div><!-- /row -->
                    </div><!-- /container -->
                </div>
            </div><!-- /header-bottom -->
        </header>
        <!--  header-area-end  -->


        <!--  ====== header extra info start================================== -->
            <!-- side-mobile-menu start -->
            <div class="side-mobile-menu bg-white pt-50  pb-30 pl-30 pr-30">
                <div class="close-icon float-right pt-10 mb-20">
                    <a href="javascript:void(0);"><span class="icon-clear theme-color"><i class="fa fa-times"></i></span></a>
                </div>
                <div class="mobile-menu"></div>

                <ul class="social-link text-center text-md-right pt-50 pb-50 clear-both">
                    <li class="d-inline-block">
                        <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li class="d-inline-block">
                        <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                    </li>
                    <li class="d-inline-block">
                        <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-google-plus-g"></i></a>
                    </li>
                    <li class="d-inline-block">
                        <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                </ul><!-- social-link -->
            </div><!-- /side-mobile-menu -->
            <div class="body-overlay"></div>
        <!-- header extra info end  -->
   

        <main>
            <!-- ======slider-area-start=========================================== -->
            <div id="home" class="slider-area slider5-bg overly position-relative slider-height d-flex align-items-center justify-content-center position-relative over-hidden no-repeat bg-cover" data-background="images/banner/home5-slider-img.jpg">
                <div class="container">
                    <div class="single-slider">
                        <div class="row align-items-center justify-content-center">
                            <div class="col-xl-8  col-lg-8 col-md-8  col-sm-10 col-12">
                                <div class="slider-content text-center z-index1">
                                    <span class="f-600 text-white d-block wow fadeInUp" data-wow-duration=".6s" data-wow-delay=".3s">World Class Applications</span>
                                    <h1 class="text-white wow fadeIn f-700 pb-15" data-wow-duration="1.8s" data-wow-delay=".5s">Solution for your Business</h1>
                                    <p class="text-white wow fadeInUp" data-wow-duration="1.4s" data-wow-delay=".7s">Lorem ipsum dolor sit amet conse cotetur adipi sicing elit sed do eius mod tempor</p>
                                    <a href="#" class="btn theme-bg mt-30 wow fadeInUp" data-wow-delay=".5s" data-wow-duration="1s">Full Story</a>
                                </div>
                            </div><!-- /col -->
                        </div><!-- /row -->
                     </div>
                </div><!-- /container -->
                <div class="slider-arrow left-50 position-absolute  smooth-scroll">
                    <a href="#about" class="slider-arrow-btn  bounce-animate-arrow position-relative d-inline-block"></a>
                </div><!-- /slider-arrow -->
            </div>
            <!-- slider-area-end=  -->

            <!-- ====== about-area-start=========================================== -->
            <div id="about" class="about-area mt-95 over-hidden">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-xl-5 offset-xl-0 col-lg-5 offset-lg-0 col-md-10 offset-md-1 col-sm-12 col-12">
                            <div class="about-img text-center wow fadeInLeft" data-wow-duration="1.6s">
                                <img src="../static/picture/about-img.png" alt="">
                            </div><!-- /about-img -->
                        </div><!-- /col -->
                        <div class="col-xl-7  col-lg-7  col-md-12 col-sm-12 col-12">
                            <div class="about-content mt-35 mb-50 pt-10">
                                <div class="title">
                                    <span class="sub-heading d-block f-700 theme-color mb-10">About Us</span>
                                    <h3 class="f-700">We Innovate  Digital  Goods</h3>
                                </div>
                                <ul class="about-text mt-45 d-md-flex justify-content-between">
                                    <li class="mr-25">
                                        <p>Topre eohen derit in voluptate velit esse cillum Lorem ipsum dolor sit amet, conse ctetur adipisicing elit, sed do eiusmod te mpor incididunt ut labore et dolore ma gna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco</p>
                                    </li>
                                    <li>
                                        <p>Topre eohen derit in voluptate velit esse cillum Lorem ipsum dolor sit amet, conse ctetur adipisicing elit, sed do eiusmod te mpor incididunt ut labore et dolone.</p>
                                    </li>
                                </ul>
                                <div class="btn-2 position-relative d-inline-block mt-30">
                                    <a href="#" class="primary-color f-700 d-block wow fadeInUp" data-wow-delay=".5s" data-wow-duration=".7s">More About us</a>
                                </div>
                            </div><!-- /about-content -->
                        </div><!-- /col -->
                    </div><!-- /row -->
                </div><!-- /container -->
            </div>
            <!-- about-area-end -->

            <!-- ====== service-area-start ==================================== -->
            <div class="service-area pt-190 mb-135 over-hidden">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-6  col-lg-7  col-md-12  col-sm-12 col-12">
                            <div class="service-content">
                                <div class="title">
                                    <span class="sub-heading d-block f-700 theme-color mb-10">Service</span>
                                    <h3 class="f-700">Industry Standard Service</h3>
                                </div>
                                <ul class="service-text mt-55 d-sm-flex justify-content-between">
                                    <li>
                                        <div class="single-service mb-40 pr-30">
                                            <div class="ser-icon d-inline-block text-center mb-6">
                                                <span class=" theme-bg text-white d-block"><i class="fal fa-layer-group"></i></span>
                                            </div><!-- /ser-icon -->
                                            <div class="service-text">
                                                <h6 class="f-700 mb-15">Web Solutions</h6>
                                                <p>Dunt ut labore et dolore ma gna aliquaim ad minim</p>
                                            </div>
                                        </div><!-- /single-service -->
                                        <div class="single-service mb-40 pr-30">
                                            <div class="ser-icon d-inline-block text-center mb-6">
                                                <span class=" theme-bg text-white d-block"><i class="fal fa-bezier-curve"></i></span>
                                            </div><!-- /ser-icon -->
                                            <div class="service-text">
                                                <h6 class="f-700 mb-15">Digital Marketing</h6>
                                                <p>Dunt ut labore et dolore ma gna aliquaim ad minim</p>
                                            </div>
                                        </div><!-- /single-service -->
                                    </li>
                                    <li>
                                        <div class="single-service mb-40 pr-30">
                                            <div class="ser-icon d-inline-block text-center mb-6">
                                                <span class="theme-bg text-white d-block"><i class="fal fa-tablet-android"></i></span>
                                            </div><!-- /ser-icon -->
                                            <div class="service-text">
                                                <h6 class="f-700 mb-15">Mobile Application</h6>
                                                <p>Dunt ut labore et dolore ma gna aliquaim ad minim</p>
                                            </div>
                                        </div><!-- /single-service -->
                                        <div class="single-service mb-40 pr-30">
                                            <div class="ser-icon d-inline-block text-center mb-6">
                                                <span class="theme-bg text-white d-block"><i class="fal fa-comments"></i></span>
                                            </div><!-- /ser-icon -->
                                            <div class="service-text">
                                                <h6 class="f-700 mb-15">Consultancy</h6>
                                                <p>Dunt ut labore et dolore ma gna aliquaim ad minim</p>
                                            </div>
                                        </div><!-- /single-service -->
                                    </li>
                                </ul>
                            </div><!-- /service-content -->
                        </div><!-- /col -->
                        <div class="col-xl-5 offset-xl-1  col-lg-5 offset-lg-0  col-md-10 offset-md-1  col-sm-12 col-12">
                            <div class="wow fadeInUp" data-wow-duration="2s" data-wow-delay=".8">
                            <div class="service-img mt-40 pl-35 bounce-animate">
                                <div class="service-img-bg pt- text-center">
                                    <img src="../static/picture/service-img.png" alt="">
                                </div>
                            </div><!-- /service-img -->
                           </div>
                        </div><!-- /col -->
                    </div><!-- /row -->
                </div><!-- /container -->
            </div>
            <!-- service-area-end  -->

            <div class="feature-product-wrapper-bg position-relative">
                <!-- ====== feature-area-start=========================================== -->
                    <div class="feature-area feature-product-bg mb-100 pt-100 over-hidden">
                        <div class="container">
                            <div class="row ">
                                <div class="col-xl-6  col-lg-6  col-md-12  col-sm-12 col-12">
                                    <div class="feature-img wow fadeInLeft" data-wow-duration="1.6s">
                                        <img src="../static/picture/feature-img.png" alt="">
                                    </div><!-- /service-img -->
                                </div><!-- /col -->
                                <div class="col-xl-6  col-lg-6  col-md-12  col-sm-12 col-12">
                                    <div class="feature-content mt-100 ">
                                        <div class="title">
                                            <span class="sub-heading d-block f-700 theme-color">Why Choose Us</span>
                                            <h3 class="f-700">Never compromise with Quality</h3>
                                        </div><!-- /title -->
                                        <ul class="feature-text mt-50">
                                            <li class="d-flex">
                                                <span class="feature-icon theme-color d-inline-block mr-20"><i class="fal fa-check"></i></span>
                                                <p>Dunt ut labore et dolore ma gna aliquaim ad minim vul koreo amare ki mone pore na ami todiba.</p>
                                            </li>
                                            <li class="d-flex">
                                                <span class="feature-icon theme-color d-inline-block mr-20"><i class="fal fa-check"></i></span>
                                                <p>Praesent mattis, orci in vulputate ultrices, turpis ipsum imp erdiet nibh, in porta lectus diam non nis.</p>
                                            </li>
                                            <li class="d-flex">
                                                <span class="feature-icon theme-color d-inline-block mr-20"><i class="fal fa-check"></i></span>
                                                <p>Vamus ut massa non felis fermentum convallis at ac urna. Sed vitae purus soda</p>
                                            </li> 
                                        </ul>
                                    </div><!-- /service-content -->
                                </div><!-- /col -->
                            </div><!-- /row -->
                        </div><!-- /container -->
                    </div><!-- feature-area-end -->

                <!-- ====== our-product-area-start================================ -->
                <div id="product" class="product-area pt-110 pb-260 over-hidden">
                   
                    <div class="container position-relative ">
                        <div class="product-bg">
                            <img src="../static/picture/product-bg.png" alt="">
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-xl-6 col-lg-7 col-md-8  col-sm-12 col-12">
                                <div class="title text-center d-inline-block mb-70">
                                    <span class="sub-heading d-block f-700 theme-color">Our Product</span>
                                    <h3 class="f-700 mb-20">We Develope Amazing Products</h3>
                                </div><!-- /title -->
                            </div><!-- /col -->
                        </div><!-- /row -->
                        <div class="row">
                            <div class="col-xl-4  col-lg-4  col-md-6  col-sm-12 col-12">
                                <div class="single-product bg-white text-center pl-45 pr-45 pt-65 pb-50 mb-50 theme-border-b wow fadeInUp" data-wow-duration="1.2s">
                                    <h5 class="f-700">Custom CMS</h5>
                                    <div class="pro-icon mt-50 mb-45">
                                        <img src="../static/picture/product-icon1.png" alt="">
                                    </div>
                                    <p>Ovitae purus sodaDuis eu eros auctor augue ultricies bibend um. Phasellus semattis </p>
                                    <div class="btn-3 d-inline-block mt-25">
                                        <a href="#" class="primary-color text-capitalize f-700 d-block" data-toggle="modal" data-target="#exampleModal-p1">view details</a>
                                    </div>
                                </div><!-- /single-product -->
                                <!-- Modal start -->
                                <div class="modal fade" id="exampleModal-p1" tabindex="-1" role="dialog" aria-labelledby="exampleModal-p1" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="close-icon float-right pt-10 pr-10">
                                            <button type="button" class="close d-inline-block" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            </div>
                                            <div class="modal-content border-0"> 
                                            <div class="modal-body pl-50 pr-50 pt-10 pb-20">
                                                <div class="blog-modal-img">
                                                    <img class="w-100" src="../static/picture/product-modal-img1.jpg" alt="product image 02">
                                                </div>
                                                <div class="row">
                                                    <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                        <div class="content-wrapper mt-40">
                                                            <h3 class="modal-title mb-20 f-700">eThemeStudio Custom CMS</h3>
                                                            <p> 
                                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                            </p>
                                                            <p>
                                                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laudantium fuga molestiae, aut eius minus reprehenderit. 
                                                            </p>
                                                            <p class="mb-0">
                                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
                                                            </p>
                                                        </div>
                                                    </div><!-- /col -->
                                                    <div class="col-xl-5 col-lg-5  col-md-12 col-sm-12 col-12">
                                                        <div class="meta-wrapper primary-bg pt-50 pb-65 pr-20 pl-40 mt-40 mb-10">
                                                            <ul class="item-meta">
                                                                <li>Product Type: <span class="pl-2 primary-color f-700">Custom CMS</span></li>
                                                                <li>Platform: <span class="pl-2 primary-color f-700">Windows,MacOS,</span></li>
                                                                <li>Price:<span class="pl-2 primary-color f-700">$99 / Year</span></li>
                                                                <li>Updates: <span class="pl-2 primary-color f-700">lifetime</span></li>
                                                                <li>Supported: <span class="pl-2 primary-color f-700">Yes</span></li>
                                                            </ul>
                                                            <a href="#" class="btn theme-bg mt-25">Download Now</a>
                                                        </div>
                                                    </div><!-- /col -->
                                                </div><!-- /row -->
                                                <div class="pro-modal-footer mt-30 mb-45">
                                                    <div class="row align-items-center justify-content-md-between">
                                                        <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                            <div class="modal-tags d-sm-flex align-items-center pt-25">
                                                                <h6 class="mb-0 pr-15 f-700">Tags :</h6>
                                                                <ul class="tag-list">
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Web Design</a>
                                                                    </li>
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Social Media</a>
                                                                    </li>
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Product</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div><!-- /col -->
                                                        <div class="col-xl-5 col-lg-5  col-md-12 col-sm-10 col-12">
                                                            <div class="pro-modal-social-link d-sm-flex align-items-center justify-content-lg-end pt-25">
                                                                <h6 class="pr-15 f-700 mb-0">Share this product :</h6>
                                                                <ul class="social-link text-md-right">
                                                                    <li class="d-inline-block">
                                                                        <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-google-plus-g"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                                                    </li>
                                                                </ul><!-- social-link -->
                                                            </div>
                                                        </div><!-- /col -->
                                                    </div> <!-- .row -->
                                                </div>
                                            </div><!-- /modal-body -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal end -->
                            </div><!-- /col -->
                            <div class="col-xl-4  col-lg-4  col-md-6  col-sm- col-">
                                <div class="single-product bg-white text-center pl-45 pr-45 pt-65 pb-50 mb-50 theme-border-b wow fadeInUp" data-wow-duration="1.4s">
                                    <h5 class="f-700">Blogging Tool</h5>
                                    <div class="pro-icon mt-50 mb-45">
                                        <img src="../static/picture/product-icon2.png" alt="">
                                    </div>
                                    <p>Ovitae purus sodaDuis eu eros auctor augue ultricies bibend um. Phasellus semattis </p>
                                    <div class="btn-3 d-inline-block mt-25">
                                        <a href="#" data-toggle="modal" data-target="#exampleModal-p2" class="primary-color text-capitalize f-700 d-block">view details</a>
                                    </div>
                                </div><!-- /single-product -->
                                <!-- Modal start -->
                                <div class="modal fade" id="exampleModal-p2" tabindex="-1" role="dialog" aria-labelledby="exampleModal-p2" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="close-icon float-right pt-10 pr-10">
                                            <button type="button" class="close d-inline-block" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            </div>
                                            <div class="modal-content border-0"> 
                                            <div class="modal-body pl-50 pr-50 pt-10 pb-20">
                                                <div class="blog-modal-img">
                                                    <img class="w-100" src="../static/picture/product-modal-img2.jpg" alt="product image 02">
                                                </div>
                                                <div class="row">
                                                    <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                        <div class="content-wrapper mt-40">
                                                            <h3 class="modal-title mb-20 f-700">eThemeStudio Blogging Tool</h3>
                                                            <p> 
                                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                            </p>
                                                            <p>
                                                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laudantium fuga molestiae, aut eius minus reprehenderit. 
                                                            </p>
                                                            <p class="mb-0">
                                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
                                                            </p>
                                                        </div>
                                                    </div><!-- /col -->
                                                    <div class="col-xl-5 col-lg-5  col-md-12 col-sm-12 col-12">
                                                        <div class="meta-wrapper primary-bg pt-50 pb-65 pr-20 pl-40 mt-40 mb-10">
                                                            <ul class="item-meta">
                                                                <li>Product Type: <span class="pl-2 primary-color f-700">Blogging Tool</span></li>
                                                                <li>Platform: <span class="pl-2 primary-color f-700">Windows,MacOS,</span></li>
                                                                <li>Price:<span class="pl-2 primary-color f-700">$99 / Year</span></li>
                                                                <li>Updates: <span class="pl-2 primary-color f-700">lifetime</span></li>
                                                                <li>Supported: <span class="pl-2 primary-color f-700">Yes</span></li>
                                                            </ul>
                                                            <a href="#" class="btn theme-bg mt-25">Download Now</a>
                                                        </div>
                                                    </div><!-- /col -->
                                                </div><!-- /row -->
                                                <div class="pro-modal-footer mt-30 mb-45">
                                                    <div class="row align-items-center justify-content-md-between">
                                                        <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                            <div class="modal-tags d-sm-flex align-items-center pt-25">
                                                                <h6 class="mb-0 pr-15 f-700">Tags :</h6>
                                                                <ul class="tag-list">
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Web Design</a>
                                                                    </li>
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Social Media</a>
                                                                    </li>
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Product</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div><!-- /col -->
                                                        <div class="col-xl-5 col-lg-5  col-md-12 col-sm-10 col-12">
                                                            <div class="pro-modal-social-link d-sm-flex align-items-center justify-content-lg-end pt-25">
                                                                <h6 class="pr-15 f-700 mb-0">Share this product :</h6>
                                                                <ul class="social-link text-md-right">
                                                                    <li class="d-inline-block">
                                                                        <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-google-plus-g"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                                                    </li>
                                                                </ul><!-- social-link -->
                                                            </div>
                                                        </div><!-- /col -->
                                                    </div> <!-- .row -->
                                                </div>
                                            </div><!-- /modal-body -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal end -->
                            </div><!-- /col -->
                            <div class="col-xl-4  col-lg-4  col-md-6  col-sm- col-">
                                <div class="single-product bg-white text-center pl-45 pr-45 pt-65 pb-50 mb-50 theme-border-b wow fadeInUp" data-wow-duration="1.5s">
                                    <h5 class="f-700">Photo Editor</h5>
                                    <div class="pro-icon mt-50 mb-45">
                                        <img src="../static/picture/product-icon3.png" alt="">
                                    </div>
                                    <p>Ovitae purus sodaDuis eu eros auctor augue ultricies bibend um. Phasellus semattis </p>
                                    <div class="btn-3 d-inline-block mt-25">
                                        <a href="#" data-toggle="modal" data-target="#exampleModal-p3" class="primary-color text-capitalize f-700 d-block">view details</a>
                                    </div>
                                </div><!-- /single-product -->
                                <!-- Modal start -->
                                    <div class="modal fade" id="exampleModal-p3" tabindex="-1" role="dialog" aria-labelledby="exampleModal-p3" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="close-icon float-right pt-10 pr-10">
                                                <button type="button" class="close d-inline-block" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                                </div>
                                                <div class="modal-content border-0"> 
                                                <div class="modal-body pl-50 pr-50 pt-10 pb-20">
                                                    <div class="blog-modal-img">
                                                        <img class="w-100" src="../static/picture/product-modal-img3.jpg" alt="product image 02">
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                            <div class="content-wrapper mt-40">
                                                                <h3 class="modal-title mb-20 f-700">eThemeStudio Photo Editor</h3>
                                                                <p> 
                                                                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                                </p>
                                                                <p>
                                                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laudantium fuga molestiae, aut eius minus reprehenderit. 
                                                                </p>
                                                                <p class="mb-0">
                                                                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
                                                                </p>
                                                            </div>
                                                        </div><!-- /col -->
                                                        <div class="col-xl-5 col-lg-5  col-md-12 col-sm-12 col-12">
                                                            <div class="meta-wrapper primary-bg pt-50 pb-65 pr-20 pl-40 mt-40 mb-10">
                                                                <ul class="item-meta">
                                                                    <li>Product Type: <span class="pl-2 primary-color f-700">Photo Editor</span></li>
                                                                    <li>Platform: <span class="pl-2 primary-color f-700">Windows,MacOS,</span></li>
                                                                    <li>Price:<span class="pl-2 primary-color f-700">$99 / Year</span></li>
                                                                    <li>Updates: <span class="pl-2 primary-color f-700">lifetime</span></li>
                                                                    <li>Supported: <span class="pl-2 primary-color f-700">Yes</span></li>
                                                                </ul>
                                                                <a href="#" class="btn theme-bg mt-25">Download Now</a>
                                                            </div>
                                                        </div><!-- /col -->
                                                    </div><!-- /row -->
                                                    <div class="pro-modal-footer mt-30 mb-45">
                                                        <div class="row align-items-center justify-content-md-between">
                                                            <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                                <div class="modal-tags d-sm-flex align-items-center pt-25">
                                                                    <h6 class="mb-0 pr-15 f-700">Tags :</h6>
                                                                    <ul class="tag-list">
                                                                        <li class="d-inline-block pr-10 f-600">
                                                                            <a class="secondary-color d-block" href="#">Web Design</a>
                                                                        </li>
                                                                        <li class="d-inline-block pr-10 f-600">
                                                                            <a class="secondary-color d-block" href="#">Social Media</a>
                                                                        </li>
                                                                        <li class="d-inline-block pr-10 f-600">
                                                                            <a class="secondary-color d-block" href="#">Product</a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div><!-- /col -->
                                                            <div class="col-xl-5 col-lg-5  col-md-12 col-sm-10 col-12">
                                                                <div class="pro-modal-social-link d-sm-flex align-items-center justify-content-lg-end pt-25">
                                                                    <h6 class="pr-15 f-700 mb-0">Share this product :</h6>
                                                                    <ul class="social-link text-md-right">
                                                                        <li class="d-inline-block">
                                                                            <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                                                        </li>
                                                                        <li class="d-inline-block">
                                                                            <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                                                        </li>
                                                                        <li class="d-inline-block">
                                                                            <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-google-plus-g"></i></a>
                                                                        </li>
                                                                        <li class="d-inline-block">
                                                                            <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                                                        </li>
                                                                    </ul><!-- social-link -->
                                                                </div>
                                                            </div><!-- /col -->
                                                        </div> <!-- .row -->
                                                    </div>
                                                </div><!-- /modal-body -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <!-- Modal end -->
                            </div><!-- /col -->
                            <div class="col-xl-4  col-lg-4  col-md-6  col-sm- col-">
                                <div class="single-product bg-white text-center pl-45 pr-45 pt-65 pb-50 mb-50 theme-border-b wow fadeInUp" data-wow-duration="1.2s">
                                    <h5 class="f-700">Accounting App</h5>
                                    <div class="pro-icon mt-50 mb-45">
                                        <img src="../static/picture/product-icon4.png" alt="">
                                    </div>
                                    <p>Ovitae purus sodaDuis eu eros auctor augue ultricies bibend um. Phasellus semattis </p>
                                    <div class="btn-3 d-inline-block mt-25">
                                        <a href="#" data-toggle="modal" data-target="#exampleModal-p4" class="primary-color text-capitalize f-700 d-block">view details</a>
                                    </div>
                                </div><!-- /single-product -->
                                <!-- Modal start -->
                                <div class="modal fade" id="exampleModal-p4" tabindex="-1" role="dialog" aria-labelledby="exampleModal-p4" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="close-icon float-right pt-10 pr-10">
                                            <button type="button" class="close d-inline-block" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            </div>
                                            <div class="modal-content border-0"> 
                                            <div class="modal-body pl-50 pr-50 pt-10 pb-20">
                                                <div class="blog-modal-img">
                                                    <img class="w-100" src="../static/picture/product-modal-img4.jpg" alt="blog post image 02">
                                                </div>
                                                <div class="row">
                                                    <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                        <div class="content-wrapper mt-40">
                                                            <h3 class="modal-title mb-20 f-700">eThemeStudio Accounting App</h3>
                                                            <p> 
                                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                            </p>
                                                            <p>
                                                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laudantium fuga molestiae, aut eius minus reprehenderit. 
                                                            </p>
                                                            <p class="mb-0">
                                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
                                                            </p>
                                                        </div>
                                                    </div><!-- /col -->
                                                    <div class="col-xl-5 col-lg-5  col-md-12 col-sm-12 col-12">
                                                        <div class="meta-wrapper primary-bg pt-50 pb-65 pr-20 pl-40 mt-40 mb-10">
                                                            <ul class="item-meta">
                                                                <li>Product Type: <span class="pl-2 primary-color f-700">Accounting App</span></li>
                                                                <li>Platform: <span class="pl-2 primary-color f-700">Windows,MacOS,</span></li>
                                                                <li>Price:<span class="pl-2 primary-color f-700">$99 / Year</span></li>
                                                                <li>Updates: <span class="pl-2 primary-color f-700">lifetime</span></li>
                                                                <li>Supported: <span class="pl-2 primary-color f-700">Yes</span></li>
                                                            </ul>
                                                            <a href="#" class="btn theme-bg mt-25">Download Now</a>
                                                        </div>
                                                    </div><!-- /col -->
                                                </div><!-- /row -->
                                                <div class="pro-modal-footer mt-30 mb-45">
                                                    <div class="row align-items-center justify-content-md-between">
                                                        <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                            <div class="modal-tags d-sm-flex align-items-center pt-25">
                                                                <h6 class="mb-0 pr-15 f-700">Tags :</h6>
                                                                <ul class="tag-list">
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Web Design</a>
                                                                    </li>
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Social Media</a>
                                                                    </li>
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Product</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div><!-- /col -->
                                                        <div class="col-xl-5 col-lg-5  col-md-12 col-sm-10 col-12">
                                                            <div class="pro-modal-social-link d-sm-flex align-items-center justify-content-lg-end pt-25">
                                                                <h6 class="pr-15 f-700 mb-0">Share this product :</h6>
                                                                <ul class="social-link text-md-right">
                                                                    <li class="d-inline-block">
                                                                        <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-google-plus-g"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                                                    </li>
                                                                </ul><!-- social-link -->
                                                            </div>
                                                        </div><!-- /col -->
                                                    </div> <!-- .row -->
                                                </div>
                                            </div><!-- /modal-body -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal end -->
                            </div><!-- /col -->
                            <div class="col-xl-4  col-lg-4  col-md-6  col-sm- col-">
                                <div class="single-product bg-white text-center pl-45 pr-45 pt-65 pb-50 mb-50 theme-border-b wow fadeInUp" data-wow-duration="1.4s">
                                    <h5 class="f-700">Keyword Tool</h5>
                                    <div class="pro-icon mt-50 mb-45">
                                        <img src="../static/picture/product-icon5.png" alt="">
                                    </div>
                                    <p>Ovitae purus sodaDuis eu eros auctor augue ultricies bibend um. Phasellus semattis </p>
                                    <div class="btn-3 d-inline-block mt-25">
                                        <a href="#" data-toggle="modal" data-target="#exampleModal-p5" class="primary-color text-capitalize f-700 d-block">view details</a>
                                    </div>
                                </div><!-- /single-product -->
                                <!-- Modal start -->
                                <div class="modal fade" id="exampleModal-p5" tabindex="-1" role="dialog" aria-labelledby="exampleModal-p5" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="close-icon float-right pt-10 pr-10">
                                            <button type="button" class="close d-inline-block" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            </div>
                                            <div class="modal-content border-0"> 
                                            <div class="modal-body pl-50 pr-50 pt-10 pb-20">
                                                <div class="blog-modal-img">
                                                    <img class="w-100" src="../static/picture/product-modal-img5.jpg" alt="blog post image 02">
                                                </div>
                                                <div class="row">
                                                    <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                        <div class="content-wrapper mt-40">
                                                            <h3 class="modal-title mb-20 f-700">eThemeStudio Keyword Tool</h3>
                                                            <p> 
                                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                            </p>
                                                            <p>
                                                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laudantium fuga molestiae, aut eius minus reprehenderit. 
                                                            </p>
                                                            <p class="mb-0">
                                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
                                                            </p>
                                                        </div>
                                                    </div><!-- /col -->
                                                    <div class="col-xl-5 col-lg-5  col-md-12 col-sm-12 col-12">
                                                        <div class="meta-wrapper primary-bg pt-50 pb-65 pr-20 pl-40 mt-40 mb-10">
                                                            <ul class="item-meta">
                                                                <li>Product Type: <span class="pl-2 primary-color f-700">Keyword Tool</span></li>
                                                                <li>Platform: <span class="pl-2 primary-color f-700">Windows,MacOS,</span></li>
                                                                <li>Price:<span class="pl-2 primary-color f-700">$99 / Year</span></li>
                                                                <li>Updates: <span class="pl-2 primary-color f-700">lifetime</span></li>
                                                                <li>Supported: <span class="pl-2 primary-color f-700">Yes</span></li>
                                                            </ul>
                                                            <a href="#" class="btn theme-bg mt-25">Download Now</a>
                                                        </div>
                                                    </div><!-- /col -->
                                                </div><!-- /row -->
                                                <div class="pro-modal-footer mt-30 mb-45">
                                                    <div class="row align-items-center justify-content-md-between">
                                                        <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                            <div class="modal-tags d-sm-flex align-items-center pt-25">
                                                                <h6 class="mb-0 pr-15 f-700">Tags :</h6>
                                                                <ul class="tag-list">
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Web Design</a>
                                                                    </li>
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Social Media</a>
                                                                    </li>
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Product</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div><!-- /col -->
                                                        <div class="col-xl-5 col-lg-5  col-md-12 col-sm-10 col-12">
                                                            <div class="pro-modal-social-link d-sm-flex align-items-center justify-content-lg-end pt-25">
                                                                <h6 class="pr-15 f-700 mb-0">Share this product :</h6>
                                                                <ul class="social-link text-md-right">
                                                                    <li class="d-inline-block">
                                                                        <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-google-plus-g"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                                                    </li>
                                                                </ul><!-- social-link -->
                                                            </div>
                                                        </div><!-- /col -->
                                                    </div> <!-- .row -->
                                                </div>
                                            </div><!-- /modal-body -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal end -->
                            </div><!-- /col -->
                            <div class="col-xl-4  col-lg-4  col-md-6  col-sm- col-">
                                <div class="single-product bg-white text-center pl-45 pr-45 pt-65 pb-50 mb-50 theme-border-b wow fadeInUp" data-wow-duration="1.5s">
                                    <h5 class="f-700">Social Media Tool</h5>
                                    <div class="pro-icon mt-50 mb-45">
                                        <img src="../static/picture/product-icon6.png" alt="">
                                    </div>
                                    <p>Ovitae purus sodaDuis eu eros auctor augue ultricies bibend um. Phasellus semattis </p>
                                    <div class="btn-3 d-inline-block mt-25">
                                        <a href="#" data-toggle="modal" data-target="#exampleModal-p6" class="primary-color text-capitalize f-700 d-block">view details</a>
                                    </div>
                                </div><!-- /single-product -->
                                <!-- Modal start -->
                                <div class="modal fade" id="exampleModal-p6" tabindex="-1" role="dialog" aria-labelledby="exampleModal-p6" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="close-icon float-right pt-10 pr-10">
                                            <button type="button" class="close d-inline-block" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            </div>
                                            <div class="modal-content border-0"> 
                                            <div class="modal-body pl-50 pr-50 pt-10 pb-20">
                                                <div class="blog-modal-img">
                                                    <img class="w-100" src="../static/picture/product-modal-img6.jpg" alt="blog post image 02">
                                                </div>
                                                <div class="row">
                                                    <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                        <div class="content-wrapper mt-40">
                                                            <h3 class="modal-title mb-20 f-700">eThemeStudio Social Media Tool</h3>
                                                            <p> 
                                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                            </p>
                                                            <p>
                                                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laudantium fuga molestiae, aut eius minus reprehenderit. 
                                                            </p>
                                                            <p class="mb-0">
                                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
                                                            </p>
                                                        </div>
                                                    </div><!-- /col -->
                                                    <div class="col-xl-5 col-lg-5  col-md-12 col-sm-12 col-12">
                                                        <div class="meta-wrapper primary-bg pt-50 pb-65 pr-20 pl-40 mt-40 mb-10">
                                                            <ul class="item-meta">
                                                                <li>Product Type: <span class="pl-2 primary-color f-700">Social Media Tool</span></li>
                                                                <li>Platform: <span class="pl-2 primary-color f-700">Windows,MacOS,</span></li>
                                                                <li>Price:<span class="pl-2 primary-color f-700">$99 / Year</span></li>
                                                                <li>Updates: <span class="pl-2 primary-color f-700">lifetime</span></li>
                                                                <li>Supported: <span class="pl-2 primary-color f-700">Yes</span></li>
                                                            </ul>
                                                            <a href="#" class="btn theme-bg mt-25">Download Now</a>
                                                        </div>
                                                    </div><!-- /col -->
                                                </div><!-- /row -->
                                                <div class="pro-modal-footer mt-30 mb-45">
                                                    <div class="row align-items-center justify-content-md-between">
                                                        <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                            <div class="modal-tags d-sm-flex align-items-center pt-25">
                                                                <h6 class="mb-0 pr-15 f-700">Tags :</h6>
                                                                <ul class="tag-list">
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Web Design</a>
                                                                    </li>
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Social Media</a>
                                                                    </li>
                                                                    <li class="d-inline-block pr-10 f-600">
                                                                        <a class="secondary-color d-block" href="#">Product</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div><!-- /col -->
                                                        <div class="col-xl-5 col-lg-5  col-md-12 col-sm-10 col-12">
                                                            <div class="pro-modal-social-link d-sm-flex align-items-center justify-content-lg-end pt-25">
                                                                <h6 class="pr-15 f-700 mb-0">Share this product :</h6>
                                                                <ul class="social-link text-md-right">
                                                                    <li class="d-inline-block">
                                                                        <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-google-plus-g"></i></a>
                                                                    </li>
                                                                    <li class="d-inline-block">
                                                                        <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                                                    </li>
                                                                </ul><!-- social-link -->
                                                            </div>
                                                        </div><!-- /col -->
                                                    </div> <!-- .row -->
                                                </div>
                                            </div><!-- /modal-body -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal end -->
                            </div><!-- /col -->
                        </div><!-- /row -->
                    </div><!-- /container -->
                </div><!-- /product-area -->
                <!-- our-product-area-end  -->
                <img class="f-img-bg w-100 position-absolute top-0 left-0 right-0 w-100 mt-50 mb-100 z-index-1" src="../static/picture/feature-bg.png" alt="">
            </div><!-- /feature-product-wrapper-bg -->

            <!-- ====== feature-area-start=========================================== -->
            <div class="feature-area feature-area2 pb-90 over-hidden">
                <div class="container">
                    <div class="row ">
                        <div class="col-xl-6  col-lg-7  col-md-12  col-sm-12 col-12">
                            <div class="service-content mt-70 mb-25">
                                <div class="title">
                                    <span class="sub-heading d-block f-700 theme-color">Features</span>
                                    <h3 class="f-700 mb-40">Top Features that Keep Us Ahed</h3>
                                    <p>
                                        Phasellus seiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                                </div><!-- /title -->
                                <ul class="service-text mt-40 align-items-start">
                                    <li>
                                        <div class="single-service d-sm-flex mb-20">
                                            <div class="ser-icon d-inline-block text-center mr-25 mt-1">
                                                <span class=" theme-bg text-white d-block"><i class="fal fa-lightbulb"></i></span>
                                            </div><!-- /ser-icon -->
                                         <div class="service-text">
                                            <h6 class="f-700 pb-10">Developer Friendly Design</h6>
                                            <p>Phasellus seiusmod tempor incididunt ut labore et dolore magna aliqu ad minim veniam</p>
                                         </div>
                                        </div><!-- /single-service -->
                                    </li>
                                    <li>
                                        <div class="single-service  d-sm-flex">
                                            <div class="ser-icon d-inline-block text-center mr-25 mt-1">
                                                <span class=" theme-bg text-white d-block"><i class="fal fa-bezier-curve"></i></span>
                                            </div><!-- /ser-icon -->
                                         <div class="service-text">
                                            <h6 class="f-700 pb-10">Best User Experience</h6>
                                            <p>Phasellus seiusmod tempor incididunt ut labore et dolore magna aliqu ad minim veniam</p>
                                         </div>
                                        </div><!-- /single-service -->
                                    </li>
                                </ul>
                            </div><!-- /service-content -->
                        </div><!-- /col -->
                        <div class="col-xl-5 offset-xl-1 col-lg-5 offset-lg-0 col-md-10 offset-md-1  col-sm-12 col-12 pl-xl-0">
                            <div class="service-img mb-55 pt-60 wow fadeInRight" data-wow-duration="1.6s">
                                <img class=" bounce-animate" src="../static/picture/feature2-img.png" alt="">
                            </div><!-- /service-img -->
                        </div><!-- /col -->
                    </div><!-- /row -->
                </div><!-- /container -->
            </div>
            <!-- feature-area-end -->

            <!-- ====== team-area-start=========================================== -->
            <div id="team" class="team-area primary-bg pt-130 pb-115 over-hidden">
                <div class="container">
                    <div class="row ">
                        <div class="col-xl-5  col-lg-12 offset-lg-0 col-md-10 offset-md-1 col-sm-12 col-12">
                            <div class="service-content mb-50">
                                <div class="title">
                                    <span class="sub-heading d-block f-700 theme-color">Team Members</span>
                                    <h3 class="f-700 mb-40">Amazing Team</h3>
                                    <p>
                                       Phasellus seiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                                </div>
                            </div><!-- /service-content -->
                        </div><!-- /col -->
                        <div class="col-xl-3 offset-xl-1 col-lg-3 offset-lg-5 col-md-4 offset-md-3  col-sm-5 offset-sm-1 col-12 wow fadeInRight" data-wow-duration="1.6s">
                            <div class="single-team-wrapper position-relative">
                                <div class="single-team d-md-flex align-items-end mb-30">
                                    <div class="team-img position-relative">
                                        <img src="../static/picture/team-img1.jpg" alt="">
                                        <ul class="social-link text-center position-absolute">
                                            <li class="d-inline-block">
                                                <a class="facebook-color text-center pl-10 pr-10 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                            </li>
                                            <li class="d-inline-block">
                                                <a class="twitter-color text-center pl-10 pr-10 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                            </li>
                                            <li class="d-inline-block">
                                                <a class="linkedin-color text-center pl-10 pr-10 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                            </li>
                                        </ul><!-- social-link -->
                                    </div><!-- /team-img -->
                                    <div class="team-content team-content-left position-absolute">
                                        <h6 class="f-700 mb-1">Johnson Doe</h6>
                                        <p class="mb-10">Senior Attorney</p>
                                    </div>
                                </div><!-- /single-team -->
                            </div><!-- /single-team-wrapper -->
                        </div><!-- /col -->
                        <div class="col-xl-3 col-lg-3  col-md-4  col-sm-5 col-12 wow fadeInRight" data-wow-duration="1.6s">
                            <div class="single-team-wrapper position-relative">
                                <div class="single-team d-md-flex align-items-end mb-30">
                                    <div class="team-img position-relative">
                                        <img src="../static/picture/team-img2.jpg" alt="">
                                        <ul class="social-link text-center position-absolute">
                                            <li class="d-inline-block">
                                                <a class="facebook-color text-center pl-10 pr-10 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                            </li>
                                            <li class="d-inline-block">
                                                <a class="twitter-color text-center pl-10 pr-10 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                            </li>
                                            <li class="d-inline-block">
                                                <a class="linkedin-color text-center pl-10 pr-10 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                            </li>
                                        </ul><!-- social-link -->
                                    </div><!-- /team-img -->
                                    <div class="team-content team-content-right position-absolute">
                                        <h6 class="f-700 mb-1">Johnson Doe</h6>
                                        <p>Senior Attorney</p>
                                    </div>
                                </div><!-- /single-team -->
                            </div><!-- /single-team-wrapper -->
                        </div><!-- /col -->
                        <div class="col-xl-3 offset-lg-3 col-lg-3  col-md-4 offset-md-1 col-sm-5 offset-sm-1 col-12 wow fadeInLeft" data-wow-duration="1.6s">
                            <div class="single-team-wrapper position-relative">
                                <div class="single-team d-md-flex align-items-end mb-30">
                                    <div class="team-img position-relative">
                                        <img src="../static/picture/team-img3.jpg" alt="">
                                        <ul class="social-link text-center position-absolute">
                                            <li class="d-inline-block">
                                                <a class="facebook-color text-center pl-10 pr-10 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                            </li>
                                            <li class="d-inline-block">
                                                <a class="twitter-color text-center pl-10 pr-10 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                            </li>
                                            <li class="d-inline-block">
                                                <a class="linkedin-color text-center pl-10 pr-10 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                            </li>
                                        </ul><!-- social-link -->
                                    </div><!-- /team-img -->
                                    <div class="team-content team-content-left position-absolute">
                                        <h6 class="f-700 mb-1">Johnson Doe</h6>
                                        <p class="mb-10">Senior Attorney</p>
                                    </div>
                                </div><!-- /single-team -->
                            </div><!-- /single-team-wrapper -->
                        </div><!-- /col -->
                        <div class="col-xl-3 col-lg-3  col-md-4  col-sm-5 col-12 wow fadeInLeft" data-wow-duration="1.6s">
                            <div class="single-team-wrapper position-relative">
                                <div class="single-team d-md-flex align-items-end mb-30">
                                    <div class="team-img position-relative">
                                        <img src="../static/picture/team-img4.jpg" alt="">
                                        <ul class="social-link text-center position-absolute">
                                            <li class="d-inline-block">
                                                <a class="facebook-color text-center pl-10 pr-10 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                            </li>
                                            <li class="d-inline-block">
                                                <a class="twitter-color text-center pl-10 pr-10 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                            </li>
                                            <li class="d-inline-block">
                                                <a class="linkedin-color text-center pl-10 pr-10 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                            </li>
                                        </ul><!-- social-link -->
                                    </div><!-- /team-img -->
                                    <div class="team-content team-content-right position-absolute">
                                        <h6 class="f-700 mb-1">Johnson Doe</h6>
                                        <p>Senior Attorney</p>
                                    </div>
                                </div><!-- /single-team -->
                            </div><!-- /single-team-wrapper -->
                        </div><!-- /col -->
                    </div><!-- /row -->
                </div><!-- /container -->
            </div>
            <!-- team-area-end -->

            <!-- ====== testimonial-area-start=============================================== -->
            <div class="testimonial-area mt-125 mb-30 over-hidden">
                <div class="container">
                    <div class="row align-items-start">
                        <div class="col-xl-3 offset-xl-0  col-lg-7 offset-lg-3  col-md-8 offset-md-2  col-sm-11 col-12">
                            <div class="testimonial-persons position-relative">
                                <img class="position-absolute single-person single-person1 wow fadeInDown" data-wow-duration=".9s" src="../static/picture/testi-img1.png" alt="">
                                <img class="position-absolute single-person single-person2 wow fadeInDown" data-wow-duration="1.2s" src="../static/picture/testi-img2.png" alt="">
                                <img class="position-absolute single-person single-person3 wow fadeInDown" data-wow-duration="1.3" src="../static/picture/testi-img3.png" alt="">
                                <img class="position-absolute single-person single-person4 wow fadeInDown" data-wow-duration="1.4s" src="../static/picture/testi-img4.png" alt="">
                                <img class="position-absolute single-person single-person5 wow fadeInDown" data-wow-duration="1.5s" src="../static/picture/testi-img5.png" alt="">
                                <img class="position-absolute single-person single-person6 wow fadeInDown" data-wow-duration="1.6s" src="../static/picture/testi-img6.png" alt="">
                                <img class="position-absolute single-person single-person7 wow fadeInDown" data-wow-duration="1.7s" src="../static/picture/testi-img7.png" alt="">
                            </div><!-- /testimonial-persons -->
                        </div><!-- /col -->
                        <div class="col-xl-7 offset-xl-2  col-lg-10 offset-lg-1 col-md-12  col-sm-12 col-12">
                            <div class="title text-center text-xl-left pb-10">
                                <span class="sub-heading d-block f-700 theme-color mb-10">Latest News</span>
                                <h3 class="f-700 mb-25">They Are Amazing</h3>
                            </div><!-- /title -->
                            <div class="testimonial-active">
                                <div class="testimonial-text">
                                    <p class="font-italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod tempor incididunt ut labore et dolore magna aliqu Lor em ipsum dolor sit amet, consecte tur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore tomra keu ki dite paro premikar.</p>
                                   <div class="testi-info mb-140 d-flex mt-55">
                                        <div class="testi-avatar mr-20">
                                            <img src="../static/picture/testi-author.png" alt="">
                                        </div><!-- /testi-avatar -->
                                        <div class="avatar-info">
                                            <h6 class="f-700">James Parker</h6>
                                            <p class="">Web Developer</p>
                                        </div>
                                   </div>
                                </div><!-- /testimonial-persons -->
                                <div class="testimonial-text">
                                    <p class="font-italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod tempor incididunt ut labore et dolore magna aliqu Lor em ipsum dolor sit amet, consecte tur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore tomra keu ki dite paro premikar.</p>
                                   <div class="testi-info mb-140 d-flex mt-55">
                                        <div class="testi-avatar mr-20">
                                            <img src="../static/picture/testi-author.png" alt="">
                                        </div><!-- /testi-avatar -->
                                        <div class="avatar-info">
                                            <h6 class="f-700">James Parker</h6>
                                            <p class="">Web Developer</p>
                                        </div>
                                   </div>
                                </div><!-- /testimonial-persons -->
                                <div class="testimonial-text">
                                    <p class="font-italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod tempor incididunt ut labore et dolore magna aliqu Lor em ipsum dolor sit amet, consecte tur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore tomra keu ki dite paro premikar.</p>
                                   <div class="testi-info mb-140 d-flex mt-55">
                                        <div class="testi-avatar mr-20">
                                            <img src="../static/picture/testi-author.png" alt="">
                                        </div><!-- /testi-avatar -->
                                        <div class="avatar-info">
                                            <h6 class="f-700">James Parker</h6>
                                            <p class="">Web Developer</p>
                                        </div>
                                   </div>
                                </div><!-- /testimonial-persons -->
                            </div>
                        </div><!-- /col -->
                    </div><!-- /row -->
                </div><!-- /container -->
            </div>
            <!-- testimonial-area-end -->

            <!-- ====== brand-area-start=============================================== -->
            <div class="brand-area brand-height mb-85 over-hidden">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-5  col-lg-5  col-md-10  col-sm-12 col-12">
                            <div class="service-content mt-60">
                                <div class="title">
                                    <span class="sub-heading d-block f-700 theme-color mb-10">Partners</span>
                                    <h3 class="f-700 mb-40">Trusted By Brands</h3>
                                    <p>Kisicing elit, sed do eiusmod te mpor incididunt utlabore et dolore ma gna aliqua. Ut enco laboris nisi ut aliquip ex ea com odo consequat.</p>
                                </div><!-- /title -->
                            </div><!-- /service-content -->
                        </div><!-- /col -->
                        <div class="col-xl-6 offset-xl-1  col-lg-7  col-md-10  col-sm-12 col-12">
                            <ul class="d-sm-flex justify-content-between align-items-center mt-65 mr-20 ml-35">
                                <li>
                                    <a class="single-brand mb-70 d-block text-center" href="#"><img src="../static/picture/brand-img1.png" alt=""></a>
                                    <a class="single-brand mb-70 d-block text-center" href="#"><img src="../static/picture/brand-img5.png" alt=""></a>
                                    <a class="single-brand d-block text-center" href="#"><img src="../static/picture/brand-img7.png" alt=""></a>
                                </li>
                                <li>
                                    <a class="single-brand mb-70 d-block text-center" href="#"><img src="../static/picture/brand-img2.png" alt=""></a>
                                    <a class="single-brand mb-70 d-block text-center" href="#"><img src="../static/picture/brand-img6.png" alt=""></a>
                                    <a class="single-brand d-block text-center" href="#"><img src="../static/picture/brand-img8.png" alt=""></a>
                                </li>
                                <li>
                                    <a class="single-brand mb-70 d-block text-center" href="#"><img src="../static/picture/brand-img3.png" alt=""></a>
                                    <a class="single-brand mb-70 d-block text-center" href="#"><img src="../static/picture/brand-img4.png" alt=""></a>
                                    <a class="single-brand d-block text-center" href="#"><img src="../static/picture/brand-img9.png" alt=""></a>
                                </li>  
                            </ul>
                        </div><!-- /col -->
                    </div><!-- /row -->
                </div><!-- /container -->
            </div>
            <!-- brand-area-end  -->

            <!-- ====== blog-area-start ========================================= -->
            <div id="blog" class="blog-area over-hidden mb-130">
                <div class="blog-bg pb-148" data-background="images/blog/blog-bg.png">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-xl-6 col-lg-8  col-md-10  col-sm-12 col-12">
                                <div class="title text-center mt-150 mb-60">
                                    <span class="sub-heading d-block f-700 theme-color">Latest News</span>
                                    <h3 class="f-700 mb-22 text-center">Form Our Blog</h3>
                                    <p class="secondary-color2"><span>Ut enim ad minim veniam, quis nostrud exercitation</span> ullamco laboris nisi ut aliquip ex ea</p>
                                </div><!-- /title -->
                            </div><!-- /col -->
                        </div><!-- /row -->
                        <div class="row">
                            <div class="col-xl-4 offset-xl-0  col-lg-4 offset-lg-0  col-md-8 offset-md-2  col-sm-10 offset-sm-1 col-12">
                                <div class="single-blog mb-30 wow fadeInUp" data-wow-duration="1s">
                                    <div class="blog-img ">
                                        <img class="w-100" src="../static/picture/blog-img1.jpg" alt="">
                                    </div>
                                    <div class="single-blog-content bg-white pt-25 pb-25 pl-30 pr-20">
                                        <span class="date d-block secondary-color3 mb-1">February 04, 2020</span>
                                        <h6>
                                            <a href="#" data-toggle="modal" data-target="#exampleModal-b1">Lets make the begging to mankind to save the world again</a>
                                        </h6>
                                    </div>
                                </div><!-- /single-blog -->
                                <!-- Modal start -->
                                <div class="modal fade" id="exampleModal-b1" tabindex="-1" role="dialog" aria-labelledby="exampleModal-b1" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                    <div class="close-icon float-right pt-10 pr-10">
                                        <button type="button" class="close d-inline-block" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-content border-0"> 
                                        <div class="modal-body pl-50 pr-50 pt-10 pb-50">
                                            <div class="blog-modal-img">
                                                    <img class="w-100" src="../static/picture/blog-modal-img1.jpg" alt="blog post image 02">
                                            </div>
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-xl-10 col-lg-11  col-md-11 col-sm-12 col-12">
                                                    <div class="content-wrapper">
                                                        <h2 class="modal-title f-700 text-center">Lets make the begging to mankind to save the world again</h2>
                                                        <ul class="blog-meta mb-30 d-flex align-items-center justify-content-between ml-auto mr-auto w-50">
                                                            <li>
                                                                <a href="#" class="secondary-color">
                                                                    <i class="fas fa-folder-open"></i> Web Design
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <span class="secondary-color d-block"><i class="fal fa-calendar-alt"></i> June, 21, 2022</span>
                                                            </li>
                                                            <li>
                                                                <span class="secondary-color d-block"><i class="fal fa-clock"></i> 10 min</span>
                                                            </li>
                                                        </ul>
                                                        <p>
                                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ut recusandae assumenda. Nisi quaerat porro inventore ullam magnam beatae enim cumque. Facilis in maxime quos praesentium cupiditate cum commodi recusandae!
                                                        </p>
                                                        <p>
                                                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus eos ipsam enim perspiciatis doloremque laborum dolor nihil aperiam vel necessitatibus unde cupiditate error eum maiores, sapiente ea. Quisquam sed, molestias veniam adipisci magnam ratione aspernatur delectus a assumenda, corrupti libero commodi eaque quis vel consequatur reiciendis dolor beatae distinctio voluptatum ducimus non optio. Deleniti nobis eius, nihil incidunt voluptate labore, debitis ducimus perspiciatis rerum iure doloremque minus omnis nostrum! Voluptatibus mollitia voluptate ipsa nesciunt animi blanditiis aliquam repellat quibusdam enim eos veniam similique tempora nihil optio, iure necessitatibus hic ipsum nisi maiores perspiciatis magni? Sed vero amet quidem natus consectetur!
                                                        </p>
                                                        <p>
                                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod ex dolorum aut accusantium, fugit sunt vero animi quos porro excepturi. Quia delectus nulla voluptatem unde incidunt. Magnam natus officiis saepe.
                                                        </p>
                                                        <p>
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur reiciendis corporis deleniti beatae? At, inventore necessitatibus repellat alias tenetur quisquam nam maiores eligendi sequi itaque voluptatum architecto minus numquam!
                                                        </p>
                                                        <p>
                                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dolore consequatur eius non incidunt fugit hic error accusantium, deserunt et magnam beatae, ipsa distinctio eaque laborum molestias maiores consectetur quo, expedita laboriosam quia quibusdam. Dolores dolorem, tenetur rerum veniam facilis eaque corporis ducimus laudantium excepturi officiis quaerat maiores voluptatem vero optio. Id culpa expedita ipsa enim omnis debitis. Beatae mollitia natus ullam repudiandae ipsa neque. Sequi explicabo odio cum, odit voluptatem cupiditate vero, error incidunt fuga dolore id ut! Eligendi, necessitatibus beatae voluptatem ipsum, ducimus amet sed officia ad aliquid aperiam id, eius accusamus quibusdam doloremque! Enim laudantium sint quae.
                                                        </p>
                                                        <div class="pro-modal-footer mt-30 mb-45">
                                                            <div class="row align-items-center justify-content-md-between">
                                                                <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                                    <div class="modal-tags d-sm-flex align-items-center pt-25">
                                                                        <h6 class="mb-0 pr-15 f-700">Tags :</h6>
                                                                        <ul class="tag-list">
                                                                            <li class="d-inline-block pr-10 f-600">
                                                                                <a class="secondary-color d-block" href="#">Web Design</a>
                                                                            </li>
                                                                            <li class="d-inline-block pr-10 f-600">
                                                                                <a class="secondary-color d-block" href="#">Social Media</a>
                                                                            </li>
                                                                            <li class="d-inline-block pr-10 f-600">
                                                                                <a class="secondary-color d-block" href="#">Recent Blog</a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div><!-- /col -->
                                                                <div class="col-xl-5 col-lg-5  col-md-12 col-sm-12 col-12">
                                                                    <div class="pro-modal-social-link d-sm-flex align-items-center justify-content-lg-end pt-25">
                                                                        <h6 class="text-uppercase pr-15 f-700 mb-0">Share :</h6>
                                                                        <ul class="social-link text-md-right">
                                                                            <li class="d-inline-block">
                                                                                <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                                                            </li>
                                                                            <li class="d-inline-block">
                                                                                <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                                                            </li>
                                                                            <li class="d-inline-block">
                                                                                <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-google-plus-g"></i></a>
                                                                            </li>
                                                                            <li class="d-inline-block">
                                                                                <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                                                            </li>
                                                                        </ul><!-- social-link -->
                                                                    </div>
                                                                </div><!-- /col -->
                                                            </div> <!-- .row -->
                                                        </div>
                                                    </div>
                                                </div><!-- /col -->
                                            </div><!-- /row -->
                                        </div><!-- /modal-body -->
                                    </div>
                                    </div>
                                </div>
                                </div>
                            <!-- Modal end -->
                            </div><!-- /col -->
                            <div class="col-xl-4 offset-xl-0  col-lg-4 offset-lg-0  col-md-8 offset-md-2 col-sm-10 offset-sm-1 col-12">
                                <div class="single-blog mb-30 wow fadeInUp" data-wow-duration="1.1s">
                                   <div class="blog-img ">
                                       <img class="w-100" src="../static/picture/blog-img2.jpg" alt="">
                                   </div>
                                   <div class="single-blog-content bg-white pt-25 pb-25 pl-30 pr-20">
                                       <span class="date d-block secondary-color3 mb-1">February 04, 2020</span>
                                       <h6>
                                           <a href="#" data-toggle="modal" data-target="#exampleModal-b2">Lets make the begging to mankind to save the world again</a>
                                       </h6>
                                   </div>
                                </div><!-- /single-blog -->
                                <!-- Modal start -->
                                <div class="modal fade" id="exampleModal-b2" tabindex="-1" role="dialog" aria-labelledby="exampleModal-b2" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                        <div class="close-icon float-right pt-10 pr-10">
                                            <button type="button" class="close d-inline-block" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-content border-0"> 
                                            <div class="modal-body pl-50 pr-50 pt-10 pb-50">
                                                <div class="blog-modal-img">
                                                        <img class="w-100" src="../static/picture/blog-modal-img2.jpg" alt="blog post image 02">
                                                </div>
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-xl-10 col-lg-11  col-md-11 col-sm-12 col-12">
                                                        <div class="content-wrapper">
                                                            <h2 class="modal-title f-700 text-center">Lets make the begging to mankind to save the world again</h2>
                                                            <ul class="blog-meta mb-30 d-flex align-items-center justify-content-between ml-auto mr-auto w-50">
                                                                <li>
                                                                    <a href="#" class="secondary-color">
                                                                        <i class="fas fa-folder-open"></i> Web Design
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <span class="secondary-color d-block"><i class="fal fa-calendar-alt"></i> June, 21, 2022</span>
                                                                </li>
                                                                <li>
                                                                    <span class="secondary-color d-block"><i class="fal fa-clock"></i> 10 min</span>
                                                                </li>
                                                            </ul>
                                                            <p>
                                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ut recusandae assumenda. Nisi quaerat porro inventore ullam magnam beatae enim cumque. Facilis in maxime quos praesentium cupiditate cum commodi recusandae!
                                                            </p>
                                                            <p>
                                                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus eos ipsam enim perspiciatis doloremque laborum dolor nihil aperiam vel necessitatibus unde cupiditate error eum maiores, sapiente ea. Quisquam sed, molestias veniam adipisci magnam ratione aspernatur delectus a assumenda, corrupti libero commodi eaque quis vel consequatur reiciendis dolor beatae distinctio voluptatum ducimus non optio. Deleniti nobis eius, nihil incidunt voluptate labore, debitis ducimus perspiciatis rerum iure doloremque minus omnis nostrum! Voluptatibus mollitia voluptate ipsa nesciunt animi blanditiis aliquam repellat quibusdam enim eos veniam similique tempora nihil optio, iure necessitatibus hic ipsum nisi maiores perspiciatis magni? Sed vero amet quidem natus consectetur!
                                                            </p>
                                                            <p>
                                                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod ex dolorum aut accusantium, fugit sunt vero animi quos porro excepturi. Quia delectus nulla voluptatem unde incidunt. Magnam natus officiis saepe.
                                                            </p>
                                                            <p>
                                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur reiciendis corporis deleniti beatae? At, inventore necessitatibus repellat alias tenetur quisquam nam maiores eligendi sequi itaque voluptatum architecto minus numquam!
                                                            </p>
                                                            <p>
                                                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dolore consequatur eius non incidunt fugit hic error accusantium, deserunt et magnam beatae, ipsa distinctio eaque laborum molestias maiores consectetur quo, expedita laboriosam quia quibusdam. Dolores dolorem, tenetur rerum veniam facilis eaque corporis ducimus laudantium excepturi officiis quaerat maiores voluptatem vero optio. Id culpa expedita ipsa enim omnis debitis. Beatae mollitia natus ullam repudiandae ipsa neque. Sequi explicabo odio cum, odit voluptatem cupiditate vero, error incidunt fuga dolore id ut! Eligendi, necessitatibus beatae voluptatem ipsum, ducimus amet sed officia ad aliquid aperiam id, eius accusamus quibusdam doloremque! Enim laudantium sint quae.
                                                            </p>
                                                            <div class="pro-modal-footer mt-30 mb-45">
                                                                <div class="row align-items-center justify-content-md-between">
                                                                    <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                                        <div class="modal-tags d-sm-flex align-items-center pt-25">
                                                                            <h6 class="mb-0 pr-15 f-700">Tags :</h6>
                                                                            <ul class="tag-list">
                                                                                <li class="d-inline-block pr-10 f-600">
                                                                                    <a class="secondary-color d-block" href="#">Web Design</a>
                                                                                </li>
                                                                                <li class="d-inline-block pr-10 f-600">
                                                                                    <a class="secondary-color d-block" href="#">Social Media</a>
                                                                                </li>
                                                                                <li class="d-inline-block pr-10 f-600">
                                                                                    <a class="secondary-color d-block" href="#">Recent Blog</a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div><!-- /col -->
                                                                    <div class="col-xl-5 col-lg-5  col-md-12 col-sm-12 col-12">
                                                                        <div class="pro-modal-social-link d-sm-flex align-items-center justify-content-lg-end pt-25">
                                                                            <h6 class="text-uppercase pr-15 f-700 mb-0">Share :</h6>
                                                                            <ul class="social-link text-md-right">
                                                                                <li class="d-inline-block">
                                                                                    <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                                                                </li>
                                                                                <li class="d-inline-block">
                                                                                    <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                                                                </li>
                                                                                <li class="d-inline-block">
                                                                                    <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-google-plus-g"></i></a>
                                                                                </li>
                                                                                <li class="d-inline-block">
                                                                                    <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                                                                </li>
                                                                            </ul><!-- social-link -->
                                                                        </div>
                                                                    </div><!-- /col -->
                                                                </div> <!-- .row -->
                                                            </div>
                                                        </div>
                                                    </div><!-- /col -->
                                                </div><!-- /row -->
                                            </div><!-- /modal-body -->
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                <!-- Modal end -->
                            </div><!-- /col -->
                            <div class="col-xl-4 offset-xl-0  col-lg-4 offset-lg-0  col-md-8 offset-md-2 col-sm-10 offset-sm-1 col-12">
                            <div class="single-blog mb-30 wow fadeInUp" data-wow-duration="1.3s">
                                <div class="blog-img wow fadeInUp" data-wow-duration="1.5s">
                                    <img class="w-100" src="../static/picture/blog-img3.jpg" alt="">
                                </div>
                                <div class="single-blog-content bg-white pt-25 pb-25 pl-30 pr-20">
                                    <span class="date d-block secondary-color3 mb-1">February 04, 2020</span>
                                    <h6>
                                        <a href="#" data-toggle="modal" data-target="#exampleModal-b3">Lets make the begging to mankind to save the world again</a>
                                    </h6>
                                </div>
                            </div><!-- /single-blog -->
                            <!-- Modal start -->
                            <div class="modal fade" id="exampleModal-b3" tabindex="-1" role="dialog" aria-labelledby="exampleModal-b3" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                    <div class="close-icon float-right pt-10 pr-10">
                                        <button type="button" class="close d-inline-block" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-content border-0"> 
                                        <div class="modal-body pl-50 pr-50 pt-10 pb-50">
                                            <div class="blog-modal-img">
                                                    <img class="w-100" src="../static/picture/blog-modal-img3.jpg" alt="blog post image 02">
                                            </div>
                                            <div class="row align-items-center justify-content-center">
                                                <div class="col-xl-10 col-lg-11  col-md-11 col-sm-12 col-12">
                                                    <div class="content-wrapper">
                                                        <h2 class="modal-title f-700 text-center">Lets make the begging to mankind to save the world again</h2>
                                                        <ul class="blog-meta mb-30 d-flex align-items-center justify-content-between ml-auto mr-auto w-50">
                                                            <li>
                                                                <a href="#" class="secondary-color">
                                                                    <i class="fas fa-folder-open"></i> Web Design
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <span class="secondary-color d-block"><i class="fal fa-calendar-alt"></i> June, 21, 2022</span>
                                                            </li>
                                                            <li>
                                                                <span class="secondary-color d-block"><i class="fal fa-clock"></i> 10 min</span>
                                                            </li>
                                                        </ul>
                                                        <p>
                                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ut recusandae assumenda. Nisi quaerat porro inventore ullam magnam beatae enim cumque. Facilis in maxime quos praesentium cupiditate cum commodi recusandae!
                                                        </p>
                                                        <p>
                                                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus eos ipsam enim perspiciatis doloremque laborum dolor nihil aperiam vel necessitatibus unde cupiditate error eum maiores, sapiente ea. Quisquam sed, molestias veniam adipisci magnam ratione aspernatur delectus a assumenda, corrupti libero commodi eaque quis vel consequatur reiciendis dolor beatae distinctio voluptatum ducimus non optio. Deleniti nobis eius, nihil incidunt voluptate labore, debitis ducimus perspiciatis rerum iure doloremque minus omnis nostrum! Voluptatibus mollitia voluptate ipsa nesciunt animi blanditiis aliquam repellat quibusdam enim eos veniam similique tempora nihil optio, iure necessitatibus hic ipsum nisi maiores perspiciatis magni? Sed vero amet quidem natus consectetur!
                                                        </p>
                                                        <p>
                                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod ex dolorum aut accusantium, fugit sunt vero animi quos porro excepturi. Quia delectus nulla voluptatem unde incidunt. Magnam natus officiis saepe.
                                                        </p>
                                                        <p>
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur reiciendis corporis deleniti beatae? At, inventore necessitatibus repellat alias tenetur quisquam nam maiores eligendi sequi itaque voluptatum architecto minus numquam!
                                                        </p>
                                                        <p>
                                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dolore consequatur eius non incidunt fugit hic error accusantium, deserunt et magnam beatae, ipsa distinctio eaque laborum molestias maiores consectetur quo, expedita laboriosam quia quibusdam. Dolores dolorem, tenetur rerum veniam facilis eaque corporis ducimus laudantium excepturi officiis quaerat maiores voluptatem vero optio. Id culpa expedita ipsa enim omnis debitis. Beatae mollitia natus ullam repudiandae ipsa neque. Sequi explicabo odio cum, odit voluptatem cupiditate vero, error incidunt fuga dolore id ut! Eligendi, necessitatibus beatae voluptatem ipsum, ducimus amet sed officia ad aliquid aperiam id, eius accusamus quibusdam doloremque! Enim laudantium sint quae.
                                                        </p>
                                                        <div class="pro-modal-footer mt-30 mb-45">
                                                            <div class="row align-items-center justify-content-md-between">
                                                                <div class="col-xl-7 col-lg-7  col-md-12 col-sm-12 col-12">
                                                                    <div class="modal-tags d-sm-flex align-items-center pt-25">
                                                                        <h6 class="mb-0 pr-15 f-700">Tags :</h6>
                                                                        <ul class="tag-list">
                                                                            <li class="d-inline-block pr-10 f-600">
                                                                                <a class="secondary-color d-block" href="#">Web Design</a>
                                                                            </li>
                                                                            <li class="d-inline-block pr-10 f-600">
                                                                                <a class="secondary-color d-block" href="#">Social Media</a>
                                                                            </li>
                                                                            <li class="d-inline-block pr-10 f-600">
                                                                                <a class="secondary-color d-block" href="#">Recent Blog</a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div><!-- /col -->
                                                                <div class="col-xl-5 col-lg-5  col-md-12 col-sm-12 col-12">
                                                                    <div class="pro-modal-social-link d-sm-flex align-items-center justify-content-lg-end pt-25">
                                                                        <h6 class="text-uppercase pr-15 f-700 mb-0">Share :</h6>
                                                                        <ul class="social-link text-md-right">
                                                                            <li class="d-inline-block">
                                                                                <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                                                            </li>
                                                                            <li class="d-inline-block">
                                                                                <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                                                            </li>
                                                                            <li class="d-inline-block">
                                                                                <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-google-plus-g"></i></a>
                                                                            </li>
                                                                            <li class="d-inline-block">
                                                                                <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                                                            </li>
                                                                        </ul><!-- social-link -->
                                                                    </div>
                                                                </div><!-- /col -->
                                                            </div> <!-- .row -->
                                                        </div>
                                                    </div>
                                                </div><!-- /col -->
                                            </div><!-- /row -->
                                        </div><!-- /modal-body -->
                                    </div>
                                    </div>
                                </div>
                                </div>
                            <!-- Modal end -->
                            </div><!-- /col -->
                        </div><!-- /row -->
                    </div><!-- /container -->
                </div>
            </div>
            <!-- blog-area-end  -->

            <!-- ====== contact-area-start=============================================== -->
            <div id="contact" class="contact-area mb-120">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-5  col-lg-5  col-md-10  col-sm-12 col-12">
                            <div class="connected-info mb-50">
                                <div class="title">
                                    <span class="sub-heading d-block f-700 theme-color">Contact Us</span>
                                    <h3 class="f-700 mb-40">Stay Connected</h3>
                                    <p class="mb-0">Phasellus seiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                                </div><!-- /title -->
                                <div class="connected-info-text mt-30">
                                    <p class="mb-10"><span class="d-inline-block black-color f-700 pr-15">Address</span>20, Bardeshi, Amin Bazar</p>
                                    <p class="mb-10"><span class="d-inline-block black-color f-700 pr-15">Phone</span>+123 456 7890</p>
                                    <p class="mb-10"><span class="d-inline-block black-color f-700 pr-15">Email</span>hello@website.com </p>
                                </div>
                            </div><!-- /connected-info -->
                        </div><!-- /col -->
                        <div class="col-xl-6 offset-xl-1  col-lg-7  col-md-12  col-sm-12 col-12">
                            <div class="form-message">
                                <p></p>
                            </div>
                            <div class="contact-form">
                                <form action="php/mail.php" id="contact-form" method="POST">
                                    <div class="contact-info mt-10">
                                        <div class="row">
                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-15 wow fadeInUp" data-wow-duration="1.8s" data-delay=".5s">
                                                <input class="name w-100 border-0 pl-20 ptb-17 pr-10 form-color border-radius10 primary-bg" type="text" name="inputName" id="inputName" placeholder="Your Name" required="">
                                                <!-- /name -->
                                            </div><!-- /col -->
                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 pl-sm-0 mb-15 wow fadeInUp" data-wow-duration="1.8s" data-delay=".6s">
                                                <input class="email w-100  border-0 pl-20 ptb-17 pr-10 form-color border-radius10 primary-bg" type="email" name="inputEmail" id="inputEmail" placeholder="Your Email" required="">
                                                <!-- /name -->
                                            </div><!-- /col -->
                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-15 wow fadeInUp" data-wow-duration="1.8s" data-delay=".8s">
                                                <input class="phone w-100  border-0 pl-20 ptb-17 pr-10 form-color border-radius10 primary-bg" type="text" name="inputPhone" id="inputPhone" placeholder="Your Phone" required="">
                                                <!-- /name -->
                                            </div><!-- /col -->
                                            <div class="col-xl-6 col-lg-6 col-md-6  col-sm-6 col-12 pl-sm-0 mb-15 wow fadeInUp" data-wow-duration="1.8s" data-delay=".8s">
                                                <input class="subject w-100  border-0 pl-20 ptb-17 pr-10 form-color border-radius10 primary-bg" type="text" name="inputSubject" id="inputSubject" placeholder="Subject" required="">
                                                <!-- /name -->
                                            </div><!-- /col -->
                                        </div><!-- /row -->
                                        <div class="row no-gutters">
                                            <div class="col-xl-12  col-lg-12  col-md-12 col-sm-12 col-12 pr3 w-100 wow fadeInUp" data-wow-duration="1.8s" data-delay="1s">
                                                <textarea class="massage w-100  border-0 pl-20 ptb-17  pr-10 form-color border-radius10 primary-bg" name="inputMessage" id="inputMessage" placeholder="Write your message" required=""></textarea>
                                                <button class="btn d-inline-block theme-bg theme-border2 white-text mt-20 text-capitalize right-0 top-0 bottom-0 wow fadeInUp  wow fadeInUp" data-wow-duration="1.8s" data-delay="1.3s" type="submit" name="submit">Submit Now</button>
                                            </div><!-- /col -->
                                        </div><!-- /row -->
                                    </div>
                                </form>

                            </div>
                        </div><!-- /col -->
                    </div><!-- /row -->
                </div><!-- /container -->
            </div>
            <!-- contact-area-end  -->

            <!-- ====== banner-area-start ========================================= -->
            <div class="banner-area position-relative mb-145">
                <div class="container">
                    <div class="banner-wrapper primary-bg pl-75 pr-75 pt-65 pb-65 transition3">
                        <div class="row align-items-center justify-content-between">
                            <div class="col-xl-7 col-lg-9  col-md-12 col-sm-12 col-12">
                                <div class="banner-content">
                                    <h4 class="f-700 mb-18 text-capitalize">Buy <span class="theme-color">2050</span> & stay ahed of time</h4>
                                    <p class="mb-0">Phasellus seiusmod tempor incididunt</p>
                                </div><!-- /work-banner-content -->
                            </div><!-- /col -->
                            <div class="col-xl-5 col-lg-3  col-md-12 col-sm-12 col-12">
                                <div class="banner-btn float-left float-lg-right">
                                    <a href="#" class="btn theme-bg wow fadeInUp" data-wow-delay=".8s" data-wow-duration="1.5s">Buy Now</a>
                                </div><!-- /work-banner-content -->
                            </div><!-- /col -->
                        </div><!-- /row -->
                    </div><!-- /banner-wrapper -->
                </div><!-- /container -->
            </div>
            <!-- banner-area-end  -->

        </main>

        <!-- ====== footer-area-start ============================================ -->
        <footer> 
            <div class="footer-area over-hidden wow fadeInUp" data-wow-duration="1.6s">
                <div class="footer-top pb-80">
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-4  col-lg-4  col-md-6  col-sm-7 col-12 pr-xl-0">
                                <div class="footer-widget f-adress pb-40 mt-30">
                                    <h6 class="text-capitalize f-700 mb-22">Address</h6>
                                    <ul class="footer-address">
                                        <li class="d-flex align-items-start">
                                            <span class="f-icon mr-20 mt-1"><i class="fas fa-map-marker-alt"></i></span> 
                                            <div class="">
                                                22/1 Bardeshi, Amin Bazar <br>Dhaka 1348 <br>
                                            </div>  
                                        </li>
                                        <li>
                                            <span class="f-icon mr-20 mt-1"><i class="far fa-envelope"></i></span>
                                            hello@website.com
                                        </li>
                                        <li>
                                            <span class="f-icon mr-20 mt-1"><i class="far fa-phone"></i></span>+123 456 7890
                                        </li>
                                    </ul>
                                </div>
                            </div><!-- /col -->
                            <div class="col-xl-2  col-lg-2  col-md-3  col-sm-3 col-12">
                                <div class="footer-widget f-info pb-30 ml-40 pr-20 mt-30">
                                    <h6 class="text-capitalize f-700 mb-22">Links</h6>
                                    <ul class="footer-info">
                                        <li>
                                            <a href="#" class="position-relative d-inline-block mb-2">About Us</a>
                                        </li>
                                        <li>
                                            <a href="#" class="position-relative d-inline-block mb-2">Service</a>
                                        </li>
                                        <li>
                                            <a href="#" class="position-relative d-inline-block mb-2">Customer</a>
                                        </li>
                                        <li>
                                            <a href="#" class="position-relative d-inline-block mb-2">Career</a>
                                        </li>
                                    </ul>
                                </div>
                            </div><!-- /col -->
                            <div class="col-xl-2  col-lg-2  col-md-3  col-sm-4 col-12">
                                <div class="footer-widget f-info pb-30 ml-40 pr-20 mt-30">
                                    <h6 class="text-capitalize f-700 mb-22">help</h6>
                                    <ul class="footer-info">
                                        <li>
                                            <a href="#" class="position-relative d-inline-block mb-2">Support</a>
                                        </li>
                                        <li>
                                            <a href="#" class="position-relative d-inline-block mb-2">Doc</a>
                                        </li>
                                        <li>
                                            <a href="#" class="position-relative d-inline-block mb-2">Privacy</a>
                                        </li>
                                        <li>
                                            <a href="#" class="position-relative d-inline-block mb-2">Legal</a>
                                        </li>
                                    </ul>
                                </div>
                            </div><!-- /col -->
                            <div class="col-xl-4  col-lg-4  col-md-7  col-sm-8 col-12">
                                <div class="footer-widget f-subscriber-area pb-30 mt-30">
                                    <h6 class="text-capitalize f-700 mb-22">Subscribe to our Newsletter
                                    </h6>
                                    <div class="footer-subscribe">
                                        <p>Fectetur adipisicing elit, sed do eius mod tempor incididunt</p>
                                        <form action="#">
                                            <div class="subscribe-info mt-30 position-relative">
                                                <input class="sub-name form-control border-0 pl-20 pt-15 pb-15 pr-10 dark-black rounded-0" type="email" name="email" id="email" placeholder="Your email here...">
                                                <span class="d-inline-block position-absolute"><i class="far fa-envelope"></i></span>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div><!-- /col -->
                        </div><!-- /row -->
                    </div><!-- /container -->
                </div>
                <div class="footer-bottom mb-35">
                    <div class="container">
                        <div class="copyright-area mt-20 pb-25">
                            <div class="row align-items-center justify-content-between">
                                <div class="col-xl-6  col-lg-6  col-md-6  col-sm-12 col-12">
                                    <div class="copyright-text text-center text-md-left mt-20">
                                        <p class="mb-0">Copyright &copy; 2023.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></a>
                                        </p>
                                    </div>
                                </div><!-- /col -->
                                <div class="col-xl-6  col-lg-6  col-md-6  col-sm-12 col-12">
                                    <ul class="social-link text-center text-md-right mt-20">
                                        <li class="d-inline-block">
                                            <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-facebook-f"></i></a>
                                        </li>
                                        <li class="d-inline-block">
                                            <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-twitter"></i></a>
                                        </li>
                                        <li class="d-inline-block">
                                            <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-google-plus-g"></i></a>
                                        </li>
                                        <li class="d-inline-block">
                                            <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="#"><i class="fab fa-linkedin-in"></i></a>
                                        </li>
                                    </ul><!-- social-link -->
                                </div><!-- /col -->
                            </div><!-- /row -->
                        </div><!-- /copyright-area -->
                    </div><!-- /container -->
                </div>
            </div>
        </footer>
        <!-- back top -->
        <div class="scroll-up" id="scroll">
            <a href="#" class="theme-bg text-white d-block text-center position-fixed mr-10 transition5">
                <span><i class="fal fa-angle-double-up"></i></span>
            </a>
        </div>

        <!-- All js here -->
        <script src="../static/js/modernizr-3.5.0.min.js"></script>
        <script src="../static/js/jquery-1.12.4.min.js"></script>
        <script src="../static/js/popper.min.js"></script>
        <script src="../static/js/bootstrap.min.js"></script>
        <script src="../static/js/one-page-nav-min.js"></script>
        <script src="../static/js/slick.min.js"></script>
        <script src="../static/js/wow.min.js"></script>
        <script src="../static/js/plugins.js"></script>
        <script src="../static/js/jquery.meanmenu.min.js"></script>
        <script src="../static/js/main.js"></script>
    	
</body>
</html>